
def generate_tables(subject,content):
    return f"""
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Data Table</title>
            <!-- 可选：添加简单样式，让表格更美观 -->
            <style>
                table {{
                    border-collapse: collapse;  /* 合并边框 */
                    width: 50%;  /* 表格宽度 */
                    margin: 20px auto;  /* 表格居中 */
                }}
                th, td {{
                    border: 1px solid #ddd;  /* 边框样式 */
                    padding: 8px;  /* 单元格内边距 */
                    text-align: center;  /* 文字居中 */
                }}
                th {{
                    background-color: #f2f2f2;  /* 表头背景色 */
                }}
            </style>
        </head>
        <body>
            <h2 style="text-align: center;">{subject}</h2>  <!-- 标题 -->
            {content}  <!-- 插入DataFrame生成的表格 -->
        </body>
        </html>
        """

def generate_tables1a(subject, content, filename):
    form0='''


        <script>
        document.getElementById('myForm').addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止表单默认提交行为
            const qValue = document.getElementById('userInput').value;
            // 动态构建包含q参数的URL
            this.action = `/query/?filename=%s&q=${encodeURIComponent(qValue)}`;
            this.submit(); // 提交表单
        });
        </script>

        '''%(filename)

    return f"""
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Data Table</title>
            <!-- 添加样式，让表格和表单更美观 -->
            <style>
                table {{
                    border-collapse: collapse;
                    width: 50%;
                    margin: 20px auto;
                }}
                th, td {{
                    border: 1px solid #ddd;
                    padding: 8px;
                    text-align: center;
                }}
                th {{
                    background-color: #165DFF;
                }}
                .container {{
                    width: 50%;
                    margin: 20px auto;
                    padding: 20px;
                    border: 1px solid #ddd;
                    border-radius: 5px;
                }}
                form {{
                    margin-top: 20px;
                }}
                .form-group {{
                    margin-bottom: 15px;
                }}
                label {{
                    display: block;
                    margin-bottom: 5px;
                    font-weight: bold;
                }}
                input[type="text"], textarea {{
                    width: 100%;
                    padding: 8px;
                    box-sizing: border-box;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                }}
                button {{
                    background-color: #165DFF;
                    color: white;
                    padding: 10px 15px;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                }}
                button:hover {{
                    background-color: #165DFF;
                }}
            </style>
        </head>
        <body>
            <div class="container">
                <h2 style="text-align: center;">{subject}</h2>
                <form method="POST" id="myForm" action="/second?filename={filename}">
                <input type="hidden" name="filename" value="{filename}">
                <input 
                  type="text" 
                  id="userInput" 
                  name="q" 
                  placeholder="您的问题？" 
                  style="font-size: 18px; padding: 10px; width: 800px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;"
                >
                <button type="submit">提交</button>
                </form>

                {form0}

                
                <!-- 表格内容 -->
                {content}
                
                <!-- 文本输入表单（使用GET方法） -->
                


                    
                </form>
            </div>
        </body>
        </html>
        """
def generate_tables1(subject, content, filename, table_data=None):
    # 确保table_data是字符串格式，用于CSV下载
    csv_data = ""
    if table_data:
        # 转换表格数据为CSV格式
        for row in table_data:
            csv_data += ",".join(str(cell) for cell in row) + "\n"
    
    form0='''
        <script>
        document.getElementById('myForm').addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止表单默认提交行为
            const qValue = document.getElementById('userInput').value;
            // 动态构建包含q参数的URL
            this.action = `/query/?filename=%s&q=${encodeURIComponent(qValue)}`;
            this.submit(); // 提交表单
        });

        // 下载CSV文件功能
        function downloadCSV() {
            const csvContent = document.getElementById('csvData').textContent;
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            
            // 创建下载链接
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', '%s_data.csv');
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
        </script>
    '''%(filename, filename)

    # 隐藏的CSV数据存储
    csv_hidden = f'<textarea id="csvData" style="display:none;">{csv_data}</textarea>' if csv_data else ''
    
    # 下载按钮（如果有数据才显示）
    download_button = '''
        <button type="button" onclick="downloadCSV()" style="margin-left: 10px;">
            下载数据
        </button>
    ''' if csv_data else ''

    return f"""
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Data Table</title>
            <!-- 添加样式，让表格和表单更美观 -->
            <style>
                table {{
                    border-collapse: collapse;
                    width: 50%;
                    margin: 20px auto;
                }}
                th, td {{
                    border: 1px solid #ddd;
                    padding: 8px;
                    text-align: center;
                }}
                th {{
                    background-color: #165DFF;
                    color: white;
                }}
                .container {{
                    width: 90%;
                    max-width: 1200px;
                    margin: 20px auto;
                    padding: 20px;
                    border: 1px solid #ddd;
                    border-radius: 5px;
                }}
                form {{
                    margin-top: 20px;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }}
                .form-group {{
                    margin-bottom: 15px;
                }}
                label {{
                    display: block;
                    margin-bottom: 5px;
                    font-weight: bold;
                }}
                input[type="text"], textarea {{
                    width: 100%;
                    padding: 8px;
                    box-sizing: border-box;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                }}
                button {{
                    background-color: #165DFF;
                    color: white;
                    padding: 10px 15px;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: background-color 0.3s;
                }}
                button:hover {{
                    background-color: #0E42D2;
                }}
                .button-group {{
                    margin-top: 15px;
                    text-align: center;
                }}
            </style>
        </head>
        <body>
            <div class="container">
                <h2 style="text-align: center;">{subject}</h2>
                <form method="POST" id="myForm" action="/second?filename={filename}">
                    <input type="hidden" name="filename" value="{filename}">
                    <input 
                      type="text" 
                      id="userInput" 
                      name="q" 
                      placeholder="您的问题？" 
                      style="font-size: 18px; padding: 10px; flex-grow: 1; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;"
                    >
                    <button type="submit">提交</button>
                    {download_button}
                </form>

                {form0}
                {csv_hidden}
                
                <!-- 表格内容 -->
                {content}
            </div>
        </body>
        </html>
    """

